<template>
    <div>
    <Category :scene="scene"></Category>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0">
    <div v-show="scene==0">
        <el-button type="primary" :disabled="categortStore.c3id?false:true" size="default" :icon="Plus" @click="addSpu" >添加SPU</el-button>
        <!-- 表格展示数据 -->
         <el-table  border stripe style="margin:10px 0 ;" :data="spuList.records" >
           <el-table-column label="序号" type="index" align="center" width="80px" ></el-table-column>
           <el-table-column label="SPU名称" prop="spuName" ></el-table-column>
           <el-table-column label="SPU描述" prop="description" ></el-table-column>
           <el-table-column label="操作">
              <template #="{row,$index}">
               <el-button type="primary" size="small" :icon="Plus" title="添加SKU"></el-button>
               <el-button type="warning" size="small" :icon="Edit" title="修改SPU" @click="updateSpu(row)"></el-button>
               <el-button type="info" size="small" :icon="InfoFilled" title="查看SPU"></el-button>
               <el-button type="danger" size="small" :icon="Delete" title="删除SKU"></el-button>
              </template>
           </el-table-column>
         </el-table>
       <!-- 分页器 -->
       <el-pagination
           @size-change="sizeChange"
           @current-change="getSpuList"
           :current-page.sync="currentPage"
           :page-sizes="[3, 5, 7]"
           :page-size="pageSize"
           layout="prev, pager, next, jumper,->,sizes,total "
           :total="99" 
           background
           :pager-count="7">
       </el-pagination>
    </div>
    <AddOrUpdateSpu v-show="scene==1" @changeScene="changeScene" ref="spuRef"></AddOrUpdateSpu>
    <AddSku v-show="scene==2"></AddSku>
    </el-card>
    
    </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
    //引入element-plus提供icon图标组件
import {Delete,Edit,Plus,InfoFilled}from "@element-plus/icons-vue";
// 引入仓库
import {useCategoryStore} from '@/stores/category'
// 引入请求接口
import {reqSpuList} from '@/api/product/spu/spu'
import AddOrUpdateSpu from './addOrUpdateSpu.vue'
import AddSku from './addSku.vue'
// 获取仓库
let categortStore = useCategoryStore();
// 定义变量,操控场景切换
let scene = ref<number>(0)
// 当前第几页
let currentPage = ref<number>(1)
// 一页显示几条数据
let pageSize = ref<number>(3)
// 定义响应式对象,存储服务器返回数据
let spuList = ref({})
// 定义一个可以存储子组件实例的变量
let spuRef = ref()

// 监听三级分类id变化
watch(()=>categortStore.c3id,()=>{
    if(categortStore.c3id=='') return
    // 获取spu数据
    getSpuList()
})

// 获取某个三级分类下的spu数据
const getSpuList =async (page:number=1)=>{
    // 整理参数
    currentPage.value = page
    // 发请求获取数据
let result = await reqSpuList(currentPage.value,pageSize.value,categortStore.c3id)
    // 存储数据
spuList.value = result
}

// 一页几条数据发生变化的回调
const sizeChange = (limit:number)=>{
//    存储数据
pageSize.value=limit
// 发请求获取最新数据
getSpuList()
}

// 点击添加spu按钮的回调
const addSpu = ()=>{
    // 切换场景
    scene.value=1
    //调用子组件的方法，让子组件发两个请求
   spuRef.value.initAddSpu(categortStore.c3id);
}

// 点击修改按钮的回调
const updateSpu = (row)=>{
    // 切换场景
    scene.value=1
    spuRef.value.initHasSpuData(row)
}

// 自定义事件
const changeScene = ({screen,flag})=>{
   scene.value = screen
   if(flag='update'){
    // 重新获取数据   停留在当前页
    getSpuList(currentPage.value)
   }else{
    getSpuList()
   }
}
</script>

<style scoped>

</style>